<template>
  <el-dialog :title="title" destroy-on-close append-to-body :visible.sync="show" width="800px" :before-close="cancel">
    <el-table :height="calTableHeight() - 50" v-loading="loading" ref="WithdrawalRecord" :data="tableData">
      <el-table-column align="center" show-overflow-tooltip width="350" :label="$t('提现日期范围')">
        <template slot-scope="{ row }">
          <span>{{ row.withdrawStartTime }}</span
          >至
          <span>{{ row.withdrawEndTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="amount" :label="$t('提现金额')"> </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="" :label="$t('是否汇款')">
        <template slot-scope="{ row }">
          <span :style="{ color: $randomColor(row.isRemit) }" v-if="row.isRemit == 1">是</span>
          <span :style="{ color: $randomColor(row.isRemit) }" v-if="row.isRemit == 0">否</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="creatTime" :label="$t('创建时间')"> </el-table-column>
    </el-table>

    <div slot="footer">
      <el-button @click="cancel">关闭 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { billDistributorWithdrawList, billDistributorWithdraw } from '@/api/bill/distributerBalance'
export default {
  activated() {
    this.$nextTick(() => this.$refs['WithdrawalRecord']?.doLayout())
  },
  props: {
    /**
     * data
     */
    data: {
      type: Array,
      default: () => [],
    },
    /**
     * 标题
     */
    title: {
      type: String,
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      queryParams: {},
      form: {},
      tableData: [],
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        if (newValue) {
          this.getList()
        }
      }
    },
  },
  methods: {
    getList() {
      this.loading = true
      billDistributorWithdrawList({}).then((res) => {
        this.tableData = res.rows
        this.loading = false
      })
    },
    submitForm(data) {
      billDistributorWithdraw({ id: data.id }).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg,
        })
        this.getList()
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
